body,
html {
    width: 100%;
    height: 100%;
}

//定义一个公共边框图片
.publicBorder() {
    border-image: url("../images/border.png") 50 38 20 125;
    border-image-width: 2.0833rem 1.5833rem .8333rem 5.2083rem;
}

.line() {
    width: .1667rem;
    height: .9167rem;
    background-color: #00f4ef;
}
// 定义动画
@keyframes move {
    0% {
        transform: translateY(0);
        // margin-top: 0;
    }
    100% {
       transform: translateY(-15rem);
    }
}

body {
    background: url(../images/bg.jpg) no-repeat;
    background-size: cover;

    //整个大盒子
    .view {
        width: 80rem;
        height: 44.6667rem;
        background: url(../images/logo6.png) no-repeat;
        background-size: contain;
        display: flex;
        padding: 4.4167rem .8333rem .8333rem;
        box-sizing: border-box;

        //  左侧大盒子
        .left_container {
            flex: 3;

            //左侧第一个盒子
            .left_top_container {
                width: 100%;
                height: 4.5833rem;
                .publicBorder();
                display: flex;
                align-items: center;
                justify-content: space-around;

                .box {
                    h3 {
                        font-size: 1rem;
                    }

                    p {
                        font-size: .6667rem;
                        color: #026cf7
                    }

                }
            }

            //  左侧中间盒子
            .left_middle_container {
                width: 100%;
                height: 19.7917rem;
                margin: .8333rem 0;
                .publicBorder();

                //顶部标题
                .top_title {
                    height: 2.5rem;
                    display: flex;
                    align-items: center;
                    padding-left: 1.25rem;

                    a {
                        font-size: .9167rem;
                    }

                    a.active {
                        color: #026cf7;
                    }

                    .line_box {
                        .line();
                        margin: .4167rem;
                    }
                }

                //副标题
                .subtitle {
                    height: 1.5833rem;
                    line-height: 1.5833rem;
                    background-color: rgba(255, 255, 255, .2);
                    padding: 0 1.25rem;
                    font-size: .5833rem;

                    span {
                        color: #06f4e5;

                        &:nth-child(2) {
                            margin-left: 3.3333rem;
                            margin-right: 8.75rem;
                        }
                    }

                }

                //内容
                .content {
                    .item_content {
                        width: 100%;
                        height:15rem;
                        overflow: hidden;
                        ul{
                            animation: move  10s  linear  infinite;

                            &:hover {
                                // 暂停动画
                                animation-play-state: paused;
                            }
                        }
                        li {
                            height: 1.5rem;
                            line-height: 1.5rem;
                             padding: 0 1.25rem;
                             span{
                                color: #0355d8;
                                display: inline-block;
                                 &:nth-child(1) {
                                width: 5.6667rem;
                                }
                                 &:nth-child(2) {
                                width: 11.05rem;
                                 }
                             }
                             &:hover {
                                background-color: rgba(255,255,255,.2);
                                  }
                        }
                    }
                }
            }

            //左侧下方的盒子
            .left_bottom_container{
                .publicBorder();
                width: 100%;
                height: 14.1667rem;
                .title{
                    height: 2.9167rem;
                    line-height: 2.9167rem;
                    padding-left: .9167rem;
                    width: 100%;
                    h3{
                        font-size: .9167rem;
                    }
                }
                .content{
                    height: 10rem;
                    display: flex;
                    justify-content: space-between;
                    padding: .4167rem .9583rem;
                    .left_pieBox{
                        flex: 1;
                        height: 9.8333rem;
                        margin-right: .4167rem;
                       
                    }
                    .right_data{
                        height: 10rem;
                        width: 7rem;
                        height: 9.8333rem;
                        background: url(../images/rect.png) no-repeat;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-around;
                        .item{
                              h3 {
                               font-size: 1rem;
                            }
                            p {
                               font-size: .6667rem;
                               color: #026cf7;
                               margin-top: .625rem;
                            }
                        }
                    }
                }
            }
        }
        // 中间盒子
        .middle_container {
            flex: 4;
            margin: 0 .8333rem;
            .title{
                font-size: .9167rem;
                margin-top: .8333rem;
                span{
                    color: #026cf7;
                }
            }
            //地图
            .map{
                width: 100%;
                height: 21.6667rem;
                background-color: #06f4e5;
                margin-top:1.25rem;
            }
            .bar_Box{
                .publicBorder();
                height: 14.1667rem;
                width: 100%;
                .title{
                    height: 2.5rem;
                    line-height: 2.5rem;
                    h3{
                        font-size: .9167rem;
                        margin-left: .8333rem;
                    }
                }
                .content{
                    height: 10.4167rem;
                    // background-color: #00f4ef;
                    margin:0 .8333rem;
                    display: flex;
                    .left_bar{
                        width: 20.625rem;
                        height: 10.4167rem;
                    }
                    .right_msg{
                        width: 7.2917rem;
                        height: 10rem;
                        background: url("../images/rect.png") no-repeat;
                        p{
                            color:#0361fc;
                            font-size: .75rem;
                        }
                        .top{
                            width: 4.1667rem;
                            height: 2.9167rem;
                            margin-left:1.25rem;
                            margin-top: 1.25rem;
                        
                            h3{
                                font-size: .9167rem;
                                margin-bottom: .4167rem;
                            }
                            span{
                                color: #e34432;
                            }
                        }
                        .bottom{
                            width: 4.1667rem;
                            height: 2.9167rem;
                            margin-left:1.25rem;
                            margin-top:1.6667rem;
                            h3{
                                font-size: .9167rem;
                                 margin-bottom: .4167rem;
                            }
                             span{
                                color: #ffff00;
                            }
                        }
                    }
                }
            }
        }

        // 右侧大盒子
        .right_container {
            flex: 3;
            // 第一个盒子
            .one{
                
                .publicBorder();
                width: 100%;
                height: 6.25rem;
                padding-top: .625rem;
               .title{
                display: flex;
                 height: 1.4583rem;
                 .active{
                    color:white;
                }
                 a{
                    color: #0355d8;
                    font-size: .8333rem;
                    font-weight: 500;
                    margin-left: 1.0417rem;
                 }
                 .line_box{
                    margin-top: .2083rem;
                    .line();
                    margin-left: .8333rem;
                 }
               }
               .content{
                margin-top: 1.0417rem;
                margin-left: 1.0417rem;
                width: 100%;
                height: 2.5rem;
                display: flex;
                   h3{
                        font-size: .9167rem;
                       }
                    span{
                        color: #0355d8;
                        font-size: .8333rem;
                    }
                  .left{
                    margin-left: .4167rem;
                    width:3.9583rem;
                    height: 2.3333rem;
                    .icon-dot{
                        color:#e34432;
                    }
                    
                  }
                   .right{
                    margin-left:7rem;
                    width:6.25rem;
                    height: 2.3333rem;
                    .icon-dot{
                        color: #ffff00;
                    }
                  }
               }
            }
            .two{
                .publicBorder();
                width:22.9167rem;
                height: 10.625rem;
                margin-top: .8333rem;
                .title{
                    padding-top: .8333rem;
                    padding-left: .8333rem;
                    width: 100%;
                    height: 1.4583rem;
                    display: flex;   
                    h3{
                    font-size: .9167rem;
                    }
                      .line_box{
                        .line();
                        margin-left: 1.0417rem;
                        margin-top:.2083rem;
                    }
                    a.active{
                        background-color:#5b9efa;
                        color: aliceblue;
                    }
                    a{
                        display: inline-block;
                        color: #026cf7;
                        text-align: center;
                        margin-left: 2.0833rem;
                        font-size: .8333rem;
                        width: 1.25rem;
                        &:hover{
                            background-color:#5b9efa;
                            color: aliceblue;
                        }
                       
                    }
                }
                .line{
                    height: 7.9167rem;
                }
            }
            //父容器
            .bbox{
                //第三个盒子
            .three{
                .publicBorder();
                width: 11.25rem;
                height:9.7917rem;
                margin-top: .8333rem;
                float: left;
                .title{
                    height:2.5rem;
                    line-height: 2.5rem;
                    h3{
                        font-size: .9167rem;
                        margin-left: 1.25rem;
                    }
                }
                .content{
                    h3{
                        font-size:1.25rem;
                    }
                    .tip{
                        color: #026cf7;
                    }
                  .top2{
                    display: flex;
                      .left{
                         margin: 0 3.2833rem .8333rem 1.25rem;
                      }              
                  }  
                  .bottom2{
                    display: flex;
                    .left{
                         margin: 0 3.2833rem .8333rem 1.25rem;
                      }
                  }
                }
            }
            //第四个盒子
            .four{
                .publicBorder();
                 width: 11.25rem;
                height:9.7917rem;
                margin-top: .8333rem;
                float: right;
                margin-left: .425rem;
                 h3{
                    font-size: .9167rem;
                     margin-left: 1.25rem;
                     margin-top: .625rem;
                 }
                 .r{
                    width: 100%;
                    height: 3.3333rem;
                 }
                 .bottom2{
                    display: flex;
                    h3{
                        margin-left: 0;
                        font-size: 1.25rem;
                    
                    }
                    .tip{
                        color:#026cf7;
                    }
                    .left{
                         margin: 0 3.2833rem .8333rem 1.25rem;
                      }
                  }

            }
            }
            
            //第五个盒子
            .five{
                .publicBorder();
                margin-top: .8333rem;
                height: 10.8333rem;
                width: 100%;
                .title{
                    height: 2.1667rem;
                    line-height: 2.1667rem;
                    span{
                        display: inline-block;
                    }
                    .left{
                        font-size: .9167rem;
                        font-weight: 500;
                        margin-left: .8333rem;
                        margin-right: 4.1667rem;
                    }
                    .middle{
                        font-size: .9167rem;
                        font-weight: 500;
                        margin-right: 6.0833rem;
                    }
                    .right{
                        color: #026cf7;
                    }
                }
                //内容
                .content{
                    height: 8.3333rem;
                    display: flex;
                    //左部
                    .cup{
                        width: 5rem;
                        height: 8.3333rem;
                        margin-left: 1.0417rem;
                        font-size: .9167rem;
                        color: #0da5e9;
                        span{
                             font-size: 1.4583rem;
                             margin-right: .4167rem;

                             
                        }
                        .cup1{
                            .icon-cup1{
                                color:#d74739;
                            }
                            margin-top: .625rem;
                        }
                        .cup2{
                            .icon-cup2{
                                color:#6fe4f3;
                            }
                             margin-top: .8333rem;
                        }
                        .cup3{
                            .icon-cup3{
                                color:#499dde;
                            }
                            margin-top: .8333rem;
                        }
                    }
                    //中部
                    .hot{
                        width: 6.3333rem;
                        height: 7.0417rem;
                        margin-left: 1.8833rem;
                       ul{
                         color:#0da5e9;
                         li{
                            padding-top: .3rem;
                            padding-left: .5083rem;
                            padding-bottom: .3rem;
                            &:hover{
                                background-color:rgba(255, 255, 255, 0.2) ;
                            }
                            .icon-up{
                                margin-left: 1.2333rem;
                                color: #e13c3d;
                                
                            }
                            &:nth-child(3){
                                .icon-up{
                                color: #037b08;
                            }
                            }
                             &:nth-child(5){
                                .icon-up{
                                color: #037b08;
                            }
                            }
                         }
                       }
                    }
                    //右部
                    .ba{
                        width: 6.6667rem;
                        height: 8.125rem;
                        background-color: rgba(255, 255, 255, 0.2);
                        ul{
                            padding-left: .8333rem;
                            li{
                                padding-top: .3167rem;
                                .icon-up{
                                    color: #d74739;
                                    margin-left: .8333rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}